<template>
  <div>
    <van-nav-bar title="黑马头条-登录" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="mobile"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="code"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import { loginAPI } from "@/api";
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import {useRouter} from 'vue-router'

export default {
  setup() {
    const store = useStore();
    const router=useRouter()

    // 这里面的基本数据也都是响应式的，可以通过vue_devtools查看，后缀ref
    const loginForm = reactive({
      mobile: "13888888888",
      code: "246810",
      onSubmit
    });

    // 提交函数
    async function onSubmit() {
      store
        .dispatch("asyncLoginAction", loginForm)
        .then(res => {
          router.push({path:'/layout'})
          // console.log(res.data.data.result);
        })
        .catch(err => {
          console.log(err);
          return
        });
    }

    return {
      ...toRefs(loginForm)
    };
  }
};
</script>

<style>
:root {
  --van-nav-bar-background-color: #007bff;
  --van-nav-bar-title-text-color: #ffffff;
}
</style>

